
// 登录界面模块
const LoginView = {
  // 绘制登录界面
  
  render: function(ctx, width, height) {
    // 绘制背景
    ctx.fillStyle = '#f5f5f5';
    ctx.fillRect(0, 0, width, height);
    
    // 计算比例因子 - 增加20%显示大小
    const scaleFactor = (Math.min(width, height) / 600) * 1.2; // 基准尺寸为600
    
    // 绘制Logo区域 - 使用比例设置
    const logoSize = 150 * scaleFactor;
    const logoX = (width - logoSize) / 2;
    const logoY = 200 * scaleFactor;
    
    // 绘制圆形背景
    ctx.beginPath();
    ctx.arc(width / 2, logoY + logoSize / 2, logoSize / 2, 0, 2 * Math.PI);
    ctx.fillStyle = '#4A90E2';
    ctx.fill();
    
    // 绘制Logo文字 - 使用比例设置字体大小
    ctx.fillStyle = 'white';
    ctx.font = `bold ${32 * scaleFactor}px Arial`;
    ctx.textAlign = 'center';
    ctx.fillText('极速', width / 2, logoY + logoSize / 2 + 10 * scaleFactor);
    
    // 绘制游戏标题 - 使用比例设置字体大小
    ctx.fillStyle = '#2C3E50';
    ctx.font = `bold ${28 * scaleFactor}px Arial`;
    ctx.fillText('极速闪避', width / 2, height/2);
    
    // 绘制副标题 - 使用比例设置字体大小
    ctx.fillStyle = '#7F8C8D';
    ctx.font = `${14 * scaleFactor}px Arial`;
    ctx.fillText('挑战你的反应极限', width / 2, height/2 + 20 * scaleFactor);
    
    // 绘制登录按钮 - 使用比例设置
    const btnWidth = 240 * scaleFactor;
    const btnHeight = 50 * scaleFactor;
    const btnX = (width - btnWidth) / 2;
    const btnY = height/2 + 120 * scaleFactor;
    
    // 创建渐变
    const gradient = ctx.createLinearGradient(btnX, btnY, btnX + btnWidth, btnY);
    gradient.addColorStop(0, '#4A90E2');
    gradient.addColorStop(1, '#357ABD');
    
    // 绘制按钮 - 使用兼容函数
    ctx.beginPath();
    // 兼容低版本浏览器/平台不支持ctx.roundRect方法
    const borderRadius = 25 * scaleFactor;
    ctx.moveTo(btnX + borderRadius, btnY);
    ctx.lineTo(btnX + btnWidth - borderRadius, btnY);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY, btnX + btnWidth, btnY + borderRadius);
    ctx.lineTo(btnX + btnWidth, btnY + btnHeight - borderRadius);
    ctx.quadraticCurveTo(btnX + btnWidth, btnY + btnHeight, btnX + btnWidth - borderRadius, btnY + btnHeight);
    ctx.lineTo(btnX + borderRadius, btnY + btnHeight);
    ctx.quadraticCurveTo(btnX, btnY + btnHeight, btnX, btnY + btnHeight - borderRadius);
    ctx.lineTo(btnX, btnY + borderRadius);
    ctx.quadraticCurveTo(btnX, btnY, btnX + borderRadius, btnY);
    ctx.closePath();
    ctx.fillStyle = gradient;
    ctx.fill();
    
    // 绘制按钮文字 - 使用比例设置字体大小
    ctx.fillStyle = 'white';
    ctx.font = `bold ${18 * scaleFactor}px Arial`;
    ctx.fillText('登录', width / 2, btnY + btnHeight / 2 + 7 * scaleFactor);
    
    // 绘制版权信息 - 使用比例设置字体大小
    ctx.fillStyle = '#BDC3C7';
    ctx.font = `${12 * scaleFactor}px Arial`;
    ctx.fillText('© 2024 极速闪避 版权所有', width/2, height/5*4);
  },
  
  // 处理登录
  handleLogin: function(game) {
    console.log('登录按钮点击');
    
    // 播放点击音效（如果有）
    // TODO: 添加音效播放逻辑
    
    // 显示加载提示
    tt.showLoading({
      title: '登录中...',
      mask: true
    });
    
    // 模拟登录请求
    setTimeout(() => {
      tt.hideLoading();
      
      // 加载历史最高分
      game.loadHighScore();
      
      // 切换到主界面场景
      game.state.currentScene = 'main';
      console.log('登录成功，进入主界面');
    }, 1500);
  },
  
  // 检查是否点击了登录按钮
  checkButtonClick: function(touchX, touchY, width, height) {
    // 计算比例因子 - 增加20%显示大小
    const scaleFactor = (Math.min(width, height) / 600) * 1.2; // 基准尺寸为600
    
    // 使用与render方法相同的比例设置
    const btnWidth = 240 * scaleFactor;
    const btnHeight = 50 * scaleFactor;
    const btnX = (width - btnWidth) / 2;
    
    // 与render方法使用相同的Y坐标计算方式
    const btnY = height/2 + 120 * scaleFactor;
    
    return touchX >= btnX && touchX <= btnX + btnWidth && 
           touchY >= btnY && touchY <= btnY + btnHeight;
  }
};

module.exports = LoginView;